<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/template/basic.jspf"%>

<script type="text/javascript">
$(document).ready(function() {
	$("#groupsForSelect").dblclick(function() {
		selected();
	});
	$("#selectGroups").dblclick(function() {
		unselected();
	});
});
function selected() {
	var selOpt = $("#groupsForSelect option:selected");

	selOpt.remove();
	var selObj = $("#selectGroups");
	selObj.append(selOpt);

	var selOpt = $("#selectGroups")[0];
	ids = "";
	for (var i = 0; i < selOpt.length; i++) {
		ids += (selOpt[i].value  + ",");
	}

	if (ids != "") {
		ids = ids.substring(0, ids.length - 1);
	}
	$('#txtGroupsSelect').val(ids);
}

function selectedAll() {
	var selOpt = $("#groupsForSelect option");

	selOpt.remove();
	var selObj = $("#selectGroups");
	selObj.append(selOpt);

	var selOpt = $("#selectGroups")[0];
	ids = "";
	for (var i = 0; i < selOpt.length; i++) {
		ids += (selOpt[i].value  + ",");
	}

	if (ids != "") {
		ids = ids.substring(0, ids.length - 1);
	}
	$('#txtGroupsSelect').val(ids);
}

function unselected() {
	var selOpt = $("#selectGroups option:selected");
	selOpt.remove();
	var selObj = $("#groupsForSelect");
	selObj.append(selOpt);

	var selOpt = $("#selectGroups")[0];
	ids = "";
	for (var i = 0; i < selOpt.length; i++) {
		ids += (selOpt[i].value + ",");
	}
	
	if (ids != "") {
		ids = ids.substring(0, ids.length - 1);
	}
	$('#txtGroupsSelect').val(ids);
}

function unselectedAll() {
	var selOpt = $("#selectGroups option");
	selOpt.remove();
	var selObj = $("#groupsForSelect");
	selObj.append(selOpt);

	$('#txtGroupsSelect').val("");
}



function closeWin(){
	layer.confirm('是否关闭窗口？', {icon: 3}, function(index) {
    	parent.layer.close(parent.pageii);
    	return false;
	});
}
function sub(){
		ly.ajax({
			async : false, //请勿改成异步，下面有些程序依赖此请数据
			type : "POST",
			data : $("#form").serializeJson(),
			url : rootPath + '/system/userInfo/addUserRoleEntity.shtml',
			dataType : 'json',
			success : function(json) {
				if (json == "success") {
						layer.confirm('分配成功！是否关闭窗口？',{icon: 3}, function(index) {
							parent.grid.loadData();
							parent.layer.close(parent.pageii);
				        	return false;
 						 });
				} else {
					layer.alert(json,{icon: 2});
					return false;
				}
				;
			}
		});
// window.location="${pageContext.servletContext.contextPath }/function/addRoleFun?roleId=${roleId}&functionId="+fids;
}




</script>
<form id="form" name="form" class="form-horizontal" method="post"
		action="${ctx}/userInfo/addUserRoleEntity.shtml">
<div class="form-group">
<input id="txtGroupsSelect" type="hidden" value="${txtRoleSelect}"
			name="sysUserRoleFormMap.role_id" />
<input id="user_id" type="hidden" value="${userId}"
			name="sysUserRoleFormMap.user_id" />			
</form>			
	<label for="host" class="col-sm-3 control-label"></label>
	<div class="col-sm-9">
		<table class="tweenBoxTable" name="groups_tweenbox"
			id="groups_tweenbox" cellspacing="0" cellpadding="0" >
			<tbody>
				<tr>
					<td>已角色</td>
					<td></td>
					<td>可角色</td>
				</tr>
				<tr>
					<td><select id="selectGroups" multiple="multiple"
						class="input-large" name="selectGroups"
						style="height: 450px; width: 220px">
						<c:forEach items="${userRole}" var="key">
						<option value="${key.role_id}">${key.role_name}</option>
						</c:forEach>
					</select></td>
					<td align="center">
						<div style="margin-left: 5px; margin-right: 5px">
							<button onclick="selectedAll()" class="btn btn-primary"
								type="button" style="width: 50px;" title="全选">&lt;&lt;</button>
						</div>
						<div style="margin-left: 5px; margin-right: 5px; margin-top: 5px;">
							<button onclick="selected()" class="btn btn-primary"
								type="button" style="width: 50px;" title="选择">&lt;</button>
						</div>
						<div style="margin-left: 5px; margin-right: 5px; margin-top: 5px;">
							<button onclick="unselected()" class="btn btn-primary"
								type="button" style="width: 50px;" title="取消">&gt;</button>
						</div>
						<div style="margin-left: 5px; margin-right: 5px; margin-top: 5px">
							<button onclick="unselectedAll()" class="btn btn-primary"
								type="button" style="width: 50px;" title="全取消">&gt;&gt;</button>
						</div>
					</td>
					<td><select id="groupsForSelect"
						multiple="multiple" class="input-large"
						style="height: 450px; width: 220px">
						<c:forEach items="${role}" var="key">
						<option value="${key.role_id}">${key.role_name}</option>
						</c:forEach>
					</select></td>
				</tr>
<!-- 				<tr> -->
<!-- 					<td rowspan="3"></td>	 -->
<!-- 					<td align="center" colspan="3">		 -->
<!-- 						<button type="submit" class="btn btn-success btn-s-xs">提交</button> -->
<!-- 					</td> -->
<!-- 				</tr> -->
			</tbody>
			
		</table>
		<div class="line line-dashed line-lg pull-in"></div>
		
		<footer class="panel-footer text-right bg-light lter">
		<div class="doc-buttons" style="text-align: content;">
			<a href="javascrip:void(0)" class="btn btn-s-md btn-success btn-rounded" onclick="sub()">保存</a>
			<a href="javascrip:void(0)" class="btn btn-s-md btn-info btn-rounded" onclick="closeWin();">关闭</a>
			</div>
			</footer>
	</div>
					
</div>
